<template>
  <van-skeleton title :row="5" v-if="!info" />
  <div class="contentMy" v-else v-html="info.body"></div>

  <div class="nav-box">
    <van-icon name="arrow-left" @click="handleBack" />
    <template v-if="commen">
      <van-icon name="comment-o" :badge="commen.comments"></van-icon>
      <van-icon name="good-job-o" :badge="commen.popularity"></van-icon>
      <van-icon
        name="star-o"
        :color="isStore ? '#1989fa' : ''"
        @click="changeStore"
      ></van-icon>
      <van-icon name="share-o" color="#ccc"></van-icon>
    </template>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import {
  reactive,
  toRefs,
  onBeforeMount,
  computed,
  nextTick,
  toRef,
  onBeforeUnmount,
} from "vue";
import api from "@/api/index";
import { useStore } from "vuex";
import { Toast } from "vant";
export default {
  setup() {
    let route = useRoute();
    let router = useRouter();
    let store = useStore();

    let state = reactive({
      id: route.params.id, //获取路由传过来的id
      info: null, //新闻详情
      commen: null, //评论数据相关
    });

    // 判断当前的新闻是否在收藏列表
    let isStore = computed(() => {
      let { storeList } = store.state;
      storeList = storeList || [];
      // 当前的新闻id state.id
      // someAPI 如果满足一个条件就返回true
      return storeList.some(
        (item) => String(item.news.id) === String(state.id)
      );
    });

    // 获取新闻详情  和 评论相关数据
    onBeforeMount(async () => {
      try {
        let info = await api.queryNewsInfo(state.id);
        // 改变数据，因为数据是响应式的，
        // 更新DOM，更新数据DOM操作是异步的
        state.info = info;
        handleCSS(); //处理css样式

        // handleImage是一个回调函数
        // 当DOM更新完毕，执行回调函数
        nextTick(handleImage);

        // 获取评论相关数据
        let commen = await api.queryNewsComments(state.id);
        state.commen = commen;
      } catch {
        console.log(err);
      }
    });
    // 处理css样式
    let handleCSS = () => {
      let { css } = state.info;
      if (css && css[0]) {
        let link = document.createElement("link");
        link.href = css[0];
        link.rel = "stylesheet";
        document.head.appendChild(link);
      }
    };
    // 组件释放之前移除新增的样式
    onBeforeUnmount(() => {
      let link = document.querySelector("#link");
      if (link) {
        document.head.removeChild(link);
      }
    });
    // 进入详情页面，你看到一个收藏按钮
    // 你要点击收藏
    onBeforeMount(async () => {
      // 进入详情页，点击收藏需要判断
      // 情况一：没有登录，点击之后跳到登录页
      // 情况二：登录状态下
      // 1）已经收藏
      // 2）没有收藏过
      // 如何判断是否收藏过，根据vuex中的收藏列表，判断当前新闻是否在列表中
      let { isLogin, storeList } = store.state;
      if (isLogin == null) {
        isLogin = await store.dispatch("changeIsLoginAsync");
        // console.log(isLogin);
      }
      if (!isLogin) return; // 表示没有登录 结束程序
      // 表示已登录
      if (storeList == null) {
        store.dispatch("queryStoreListAsync");
        // console.log(isLogin);

      }
    });
    // 处理图片
    let handleImage = () => {
      let { image } = state.info;
      let imgBox = document.querySelector(".img-place-holder");
      if (image && imgBox) {
        let img = new Image();
        img.src = image;
        img.onload = () => {
          imgBox.appendChild(img);
        };
      }
    };
    // 回到上一级
    let handleBack = () => {
      router.back();
    };
    // 点击收藏
    let changeStore = async () => {
      if (!store.state.isLogin) {
        Toast.fail("请先登录~");
        router.push("/login");
        return;
      }
      // 如果登录了
      if (isStore.value) {
        // 当前已收藏过了，收藏过了，再点击表示取消收藏
        // 取消收藏 1)调接口在服务端取消收藏  2）从vuex收藏列表中移除

        // 1)调接口在服务端取消收藏
        let { id } = store.state.storeList.find(
          (item) => String(item.news.id) === String(state.id)
        );
        let { code } = await api.storeRemove(id);
        // console.log(code);
        if (code !== 0) {
          Toast.fail("移除失败~");
          return;
        }
        Toast.success("移除成功~");
        // 2）从vuex收藏列表中移除
        store.commit("removeStoreList", id);
        return;
      }

      // 没有收藏，点击表示收藏
      let { code} = await api.store(state.id);
      // console.log(state.id);
      // console.log(res);
      if (code !== 0) {
        Toast.fail("收藏失败~");
        return;
      }
      Toast.success("收藏成功~");
      store.dispatch("queryStoreListAsync");
    };
    // let changeStore = async ()=>{
    //   if(!store.state.isLogin){
    //     Toast.fail('请先登录')
    //     router.push('/login')
    //     return
    //   }
    //   // 表示已经登录了
    //   if(isStore.value){
    //     // 当前已经收藏过了，再次点击表示取消收藏
    //     // 取消收藏1）调接口在服务器端取消收藏，2）从vuex收藏列表删除

    //     // 1）调接口在服务器端取消收藏
    //     let {id} = store.state.storeList.find(item=>String(item.news.id) === String(state.id) )
    //     let {code} = await api.storeRemove(id)
    //     if(code != 0){
    //       Toast.fail('移除失败')
    //       return
    //     }
    //     Toast.success('移除成功')
    //     // 2）从列表中删除
    //     store.commit('removeStoreList',id)
    //     return
    //   }
    //   // 没有收藏，点击表示收藏
    //   let { code } = await api.store(state.id)
    //   if(code !== 0){
    //     Toast.fail('收藏失败')
    //     return
    //   }
    //   Toast.success('收藏成功')
    //   store.dispatch('queryStoreListAsync')
    //   return
    // }
    return {
      ...toRefs(state),
      handleBack,
      changeStore,
      isStore,
    };
  },
};
</script>

<style lang="less" scoped>
.contentMy {
  background: #fff;
  padding-bottom: 50px;
  margin: 0;

  /deep/ .img-place-holder {
    height: 375px;
    overflow: hidden;
    img {
      display: block;
      margin: 0;
      width: 100%;
      min-height: 100%;
    }
  }
}

.van-skeleton {
  padding: 30px 15px;
}

.nav-box {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  width: 100%;
  height: 50px;
  background: #f4f4f4;

  .van-icon:nth-child(1) {
    position: relative;
    &::after {
      position: absolute;
      top: -10%;
      right: -15px;
      content: "";
      width: 1px;
      height: 120%;
      background: #d5d5d5;
    }
  }

  /deep/ .van-badge {
    background-color: transparent;
    border: none;
    color: #000;
    right: -5px;
  }
}
</style>